<template>
  <div :class="$style.IEOCompPage">
    <div :class="$style.infoBlock">
      <div :class="$style.infoTitle">IEO Launchpad</div>
      <div :class="$style.infoSub">新币特价抢先购</div>
      <div :class="$style.infoOrange">
        <div :class="$style.orangeText1">IEO Launchpad</div>
        <div :class="$style.orangeText2">为用户提供低成本抢首发项目的投资机会</div>
      </div>
      <div :class="$style.infoContent">
        <img :class="$style.contentIcon" src="/ycoin.png" alt="" />
        <div :class="$style.contentBox">
          <div :class="$style.contentItem">
            <div :class="$style.contentTitle">MORBION</div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">认购币种：</span>
              <span :class="$style.contentSpan2">BTC</span>
            </div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">开始时间：</span>
              <span :class="$style.contentSpan2">2023-12-28 00:00:00</span>
            </div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">结束时间：</span>
              <span :class="$style.contentSpan2">2024-06-25 00:00:00</span>
            </div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">发行总量：</span>
              <span :class="$style.contentSpan2">1000000000.000000 BTC</span>
            </div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">发行单价：</span>
              <span :class="$style.contentSpan2">2.684726</span>
            </div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">参与数量：</span>
              <span :class="$style.contentSpan2">5608249226.000000 BTC</span>
            </div>
          </div>
          <div :class="$style.contentItem">
            <div :class="$style.contentTitle">项目说明</div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">认购上限：</span>
              <span :class="$style.contentSpan2">999999.000000</span>
            </div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">认购单价：</span>
              <span :class="$style.contentSpan2">701.029820</span>
            </div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">单次最低：</span>
              <span :class="$style.contentSpan2">5608249226.000000</span>
            </div>
            <div :class="$style.contentText">
              <span :class="$style.contentSpan1">认购上限 ：</span>
              <span :class="$style.contentSpan2">100.000000</span>
            </div>
          </div>
        </div>
      </div>
      <div :class="$style.infoBlue">Industry background</div>
      <div :class="$style.infoWord">
        MORBION coins are jointly launched by Mobie Exchange, with a limited issuance of 100 million.
        On December 30, 2023, the first subscription will be launched worldwide. The first subscription will have a circulation
        of 999999999 for 180 days. The subscription coins will be automatically released after 30 days of freezing. After the
        release, the currency market will open MBN/USDT trading pairs, and the contract market will open MBN/USDT trading
        pairs for trading. The price is expected to be 10 times of the subscription unit price
      </div>
    </div>
    <div :class="$style.formBlock">
      <div :class="$style.formDesc">
        <img :class="$style.descIcon" src="/ycoin.png" alt="" />
        <div :class="$style.descBox">
          <div :class="$style.descTitle">MORBION</div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">认购币种：</span>
            <span :class="$style.descSpan2">BTC</span>
          </div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">开始时间：</span>
            <span :class="$style.descSpan2">2023-12-28 00:00:00</span>
          </div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">结束时间：</span>
            <span :class="$style.descSpan2">2024-06-25 00:00:00</span>
          </div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">发行总量：</span>
            <span :class="$style.descSpan2">1000000000.000000 BTC</span>
          </div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">发行单价：</span>
            <span :class="$style.descSpan2">2.684726</span>
          </div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">参与数量：</span>
            <span :class="$style.descSpan2">5608249226.000000 BTC</span>
          </div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">认购上限：</span>
            <span :class="$style.descSpan2">999999.000000</span>
          </div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">认购单价：</span>
            <span :class="$style.descSpan2">701.029820</span>
          </div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">单次最低：</span>
            <span :class="$style.descSpan2">5608249226.000000</span>
          </div>
          <div :class="$style.descText">
            <span :class="$style.descSpan1">认购上限 ：</span>
            <span :class="$style.descSpan2">100.000000</span>
          </div>
        </div>
      </div>
      <div :class="$style.progressTitle">进度</div>
      <div :class="$style.progressBox">
        <div :class="$style.progressInner" :style="{ width: progress }">{{ progress }}</div>
      </div>
      <div :class="$style.formWhite">
        <div :class="$style.whiteInner">我要参与</div>
      </div>
      <div :class="$style.formBox">
        <div :class="$style.formLabel">认购数量(BTC)</div>
        <lay-input-number v-model="form.num"></lay-input-number>
        <div :class="$style.formLabel">支付(USDT)</div>
        <lay-input v-model="form.pay" type="number" placeholder="请输入" :allow-clear="true"></lay-input>
        <div :class="$style.formText">
          <span :class="$style.formSpan1">可用USDT：</span>
          <span :class="$style.formSpan2">15</span>
        </div>
        <lay-button @click="submitForm">立即参加</lay-button>
        <div :class="$style.formTip">可用余额不足</div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "IEOComp",
  data() {
    return {
      progress: '50%',
      form:{
        num:'',
        pay:'',
      }
    };
  },
  methods: {
    submitForm() {
      // let that = this;
      // let para = {
      //   nickName: that.formData.nickName,
      //   avatar: that.formData.avatar,
      // }
      // let loadIndex = that.$layer.load();
      // that.$axios.post('', para).then((res) => {
      //   that.$layer.close(loadIndex);
      //   that.$layer.msg(res.data.message, { time: 1000 });
      //   if (res.data.code != 200) {
      //     return;
      //   }
      // }).catch((err) => {
      //   that.$layer.close(loadIndex);
      //   that.$layer.msg('提交失败,请重试', { time: 1000 });
      // });
    },
  },
});
</script>
<style module>
.IEOCompPage {
  width: 100%;
  height: 100%;
  display: flex;
}

.infoBlock {
  width: calc(70% - 5px);
  height: 100%;
  min-width: 961px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 20px;
  overflow-y: auto;
}

.infoTitle {
  width: 100%;
  font-family: Arial;
  font-size: 30px;
  font-weight: normal;
  color: #000000;
  margin-bottom: 9px;
}

.infoSub {
  width: 100%;
  font-family: Arial;
  font-size: 20px;
  font-weight: normal;
  color: #515A6E;
  margin-bottom: 19px;
}

.infoOrange {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 24px;
  border: 1px solid #FFBA00;
  background-color: #FFF8E6;
  margin-bottom: 60px;
}

.orangeText1 {
  width: 100%;
  font-family: Source Han Sans;
  font-size: 20px;
  font-weight: bold;
  color: #FF9900;
  margin-bottom: 10px;
}

.orangeText2 {
  width: 100%;
  font-family: Source Han Sans;
  font-size: 16px;
  font-weight: 350;
  color: #FF9900;
}

.infoContent {
  width: 100%;
  display: flex;
  margin-bottom: 70px;
}

.contentIcon {
  width: 150px;
  height: 150px;
}

.contentBox {
  display: flex;
  margin-left: 28px;
}

.contentItem:first-child {
  margin-right: 99px;
}

.contentTitle {
  width: 100%;
  font-family: Arial;
  font-size: 24px;
  font-weight: normal;
  color: #000000;
}

.contentText {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.contentSpan1 {
  font-family: Source Han Sans;
  font-weight: 300;
  font-size: 20px;
  color: #515A6E;
}

.contentSpan2 {
  font-family: Source Han Sans;
  font-size: 20px;
  font-weight: 500;
  color: #515A6E;
}

.infoBlue {
  width: 258px;
  height: 44px;
  line-height: 44px;
  box-sizing: border-box;
  padding-left: 10px;
  background-color: #1890FF;
  font-family: Arial;
  font-size: 24px;
  font-weight: normal;
  color: #FFFFFF;
  margin-bottom: 20px;
}

.infoWord {
  width: 100%;
  line-height: 35px;
  word-break: break-all;
  font-family: Arial;
  font-size: 20px;
  font-weight: normal;
  color: #515A6E;
}

.formBlock {
  width: 30%;
  height: 100%;
  min-width: 365px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 20px;
  margin-left: 5px;
  overflow-x: hidden;
  overflow-y: auto;
}

.formDesc {
  width: 100%;
  display: flex;
  margin-bottom: 30px;
}

.descIcon {
  width: 60px;
  height: 60px;
  margin-right: 9px;
}

.descTitle {
  width: 100%;
  font-family: Arial;
  font-size: 16px;
  font-weight: normal;
  color: #000000;
}

.descText {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.descSpan1 {
  font-family: Source Han Sans;
  font-weight: 300;
  font-size: 14px;
  color: #515A6E;
}

.descSpan2 {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 500;
  color: #515A6E;
}

.progressTitle {
  font-family: Source Han Sans;
  font-size: 16px;
  font-weight: 300;
  color: #000000;
  margin-bottom: 15px;
}

.progressBox {
  width: 100%;
  height: 20px;
  border-radius: 3px;
  background-color: #F0F2F5;
  overflow: hidden;
  margin-bottom: 30px;
}

.progressInner {
  height: 100%;
  line-height: 20px;
  background: linear-gradient(90deg, #FF4000 0%, #FF9900 100%);
  font-family: Source Han Sans;
  font-size: 12px;
  font-weight: 350;
  color: #FFFFFF;
  border-radius: 3px;
  box-sizing: border-box;
  padding-right: 8px;
  text-align: right;
}

.formWhite {
  width: 100%;
  height: 42px;
  border-radius: 3px;
  background-color: #F0F2F5;
  box-sizing: border-box;
  padding: 6px;
}

.whiteInner {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 30px;
  background-color: #FFFFFF;
  border-radius: 3px;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #1890FF;
}

.formLabel {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #515A6E;
  margin-top: 20px;
  margin-bottom: 8px;
}
.formText {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 7px;
}

.formSpan1 {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #909399;
}

.formSpan2 {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 500;
  color: #515A6E;
}
.formTip {
  width: 100%;
  text-align: center;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 300;
  color: #EC5B56;
  margin-top: 12px;
}
</style>
<style scoped>
.layui-input-number {
  width: 100%;
}

.layui-btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #FFFFFF;
  background-color: #EC5B56;
  border-color: #EC5B56;
}
</style>